<template>
  <div class="font">
    <el-row>
      <el-col :span="2">&nbsp;</el-col>

      <el-col :span="5">
        <el-tooltip class="item" effect="dark" content="柱状图" placement="top">
          <div @click="barClick">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tiaoxingtu-xianxing"></use>
            </svg>
          </div>
        </el-tooltip>
      </el-col>

      <el-col :span="5">
        <el-tooltip class="item" effect="dark" content="折线图" placement="top">
          <div @click="lineClick">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhexiantu-xianxing"></use>
            </svg>
          </div>
        </el-tooltip>
      </el-col>

      <el-col :span="5">
        <el-tooltip class="item" effect="dark" content="饼图" placement="top">
          <div @click="pieClick">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bingtu-xianxing"></use>
            </svg>
          </div>
        </el-tooltip>
      </el-col>

      <el-col :span="5">
        <el-tooltip class="item" effect="dark" content="散点图" placement="top">
          <div @click="scatterClick">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-scatterplot_active"></use>
            </svg>
          </div>
        </el-tooltip>
      </el-col>
    </el-row>
    <el-row>&nbsp;</el-row>
    <el-row>&nbsp;</el-row>
    <el-row>&nbsp;</el-row>
  </div>
</template>

<script>
import Bus from "./Bus.js";
export default {
  data() {
    return {
      input: ""
    };
  },
  methods: {
    pieClick() {
      Bus.$emit("typeChange", "pie");
    },
    lineClick() {
      Bus.$emit("typeChange", "line");
    },
    barClick() {
      Bus.$emit("typeChange", "bar");
    },
    scatterClick() {
      Bus.$emit("typeChange", "scatter");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.font {
  font-family: "Microsoft YaHei";
  font-size: 15px;
  list-style: height 10px;
  color: #5bc0de;
}
</style>
